<template>
  <div class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">掌上进销存后台</h2>
        </div>
        <div class="login-body">
          <h3 class="login-title">登录</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
            <el-form-item prop="username">
              <el-input v-model="dataForm.username" placeholder="用户名">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-footer">
          <p><a href="https://www.zsjxc888.com/" target="_blank">掌上科技</a>2023 © zsjxc888.com</p>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import {ref, reactive, computed} from "vue";
import {getUUID} from "../../utils/util.js";
import http from "../../utils/request.js";
import {useRouter} from "vue-router";

import {message} from "../../utils/commonScript.js";


const router = useRouter()
const dataFormRef = ref()
const captchaPath = ref('')
const dataForm = reactive({
  username: 'admin',
  password: 'admin',
  uuid: '',
  captcha: ''
})

const dataRule = computed(() => {
  return {
    username: [
      { required: true, message: '必填项不能为空', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '必填项不能为空', trigger: 'blur' }
    ],
    captcha: [
      { required: true, message: '必填项不能为空', trigger: 'blur' }
    ]
  }
})
// 获取验证码
const getCaptcha = () => {
  dataForm.uuid = getUUID()
  captchaPath.value = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${dataForm.uuid}`
}
getCaptcha()

// 表单提交
const dataFormSubmitHandle = debounce(function () {
  dataFormRef.value.validate((valid) => {
    if (!valid) {
      return false
    }
    http.post('/login', this.dataForm).then(({ data: res }) => {
      if (res.code !== 0) {
        getCaptcha()
        return message.error(res.msg)
      }
      Cookies.set('token', res.data.token)
      router.replace({ name: 'home' })
    }).catch(() => {})
  })
}, 1000, { 'leading': true, 'trailing': false })

</script>

<style lang="scss" scoped>
.aui-page__login {
	&::before,
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		content: "";
	}
	&::before {
		background-image: url("../../assets/img/login_bg.jpg");
		background-size: cover;
	}
	&::after {
		background-color: rgba(38, 50, 56, .4);
	}
	.aui-content {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		padding: 50px 20px 150px;
		text-align: center;
		&__wrapper {
			height: 100vh;
			background-color: transparent;
			overflow-x: hidden;
			overflow-y: auto;
		}
	}
	.login-header {
		padding: 20px;
		color: #fff;
		.login-brand {
			margin: 0 0 15px;
			font-size: 40px;
			font-weight: 400;
			letter-spacing: 2px;
			text-transform: uppercase;
		}
		.login-intro {
			padding: 0;
			margin: 0;
			list-style: none;
			> li {
				font-size: 16px;
				line-height: 1.5;
				color: rgba(255, 255, 255, .6);
				& + li {
					margin-top: 5px;
				}
			}
		}
	}
	.login-body,
	.login-footer {
		width: 460px;
	}
	.login-body {
		padding: 20px 30px;
		background-color: #fff;
		.login-title {
			font-size: 18px;
			font-weight: 400;
		}
		.el-input__prefix .el-input__icon {
			font-size: 16px;
		}
		.login-captcha {
			height: 40px;
			line-height: 40px -2px;
			> img {
				max-width: 100%;
				cursor: pointer;
			}
		}
		.login-shortcut {
			margin-bottom: 20px;
			&__title {
				position: relative;
				margin: 0 0 15px;
				font-weight: 400;

				&::before {
					position: absolute;
					top: 50%;
					right: 0;
					left: 0;
					z-index: 1;
					content: "";
					height: 1px;
					margin-top: -.5px;
					background-color: #DCDFE6;
					overflow: hidden;
				}
				> span {
					position: relative;
					z-index: 2;
					padding: 0 20px;
					color: rgba(0, 0, 0, .3);
					background-color: #fff;
				}
			}
			&__list {
				padding: 0;
				margin: 0;
				list-style: none;
				font-size: 0;
				> li {
					display: inline-block;
					vertical-align: middle;
					margin: 0 10px;
					font-size: 28px;
				}
			}
		}
		.login-guide {
			color: rgba(0, 0, 0, .3);
		}
	}
	.login-footer {
		position: absolute;
		bottom: 0;
		padding: 20px;
		color: rgba(255, 255, 255, .6);
		p {
			margin: 10px 0;
		}
		a {
			padding: 0 5px;
			color: rgba(255, 255, 255, .6);
			&:focus,
			&:hover {
				color: #fff;
			}
		}
	}
	// 右侧垂直风格
	&--right-vertical {
		.aui-content {
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: stretch;
			padding: 0;
		}
		.login-header {
			flex: 1;
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
			padding: 30px 120px;
			text-align: left;
		}
		.login-body {
			position: relative;
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
			padding: 120px 30px 150px;
			text-align: center;
			.login-guide {
				margin-top: 0;
			}
		}
		.login-footer {
			right: 0;
			color: #606266;
			a {
				color: #606266;
				&:focus,
				&:hover {
					color: #409EFF;
				}
			}
		}
	}
}
@media (max-width: 991px) {
	.aui-page__login {
		&--right-vertical {
			.login-header {
				padding: 30px;
			}
		}
	}
}
@media (max-width: 767px) {
	.aui-page__login {
		&--right-vertical {
			.login-header {
				.login-brand,
				.login-intro {
					display: none;
				}
			}
		}
	}
}
@media (max-width: 575px) {
	.aui-page__login {
		.login-body,
		.login-footer {
			width: 100%;
		}
		.login-captcha {
			text-align: left;
			> img {
				width: 136px;
			}
		}
		&--right-vertical {
			.login-header {
				display: none;
			}
		}
	}
}
</style>
